<template>
<div class="app-container">

    <el-form ref="QueryForm"  :model="queryForm" label-width="180px" size="medium">
        <el-input v-model="queryForm.userTopPermissionGridId" hidden/>
        <el-input v-model="queryForm.gridId" hidden/>
        <el-col :span="8">
            <el-form-item label="统计开始月份" >
            <el-date-picker v-model="queryForm.monthBegin" />
            </el-form-item>
        </el-col>
         <el-col :span="8">
            <el-form-item label="统计截止月份：" >
            <el-date-picker v-model="queryForm.monthEnd" />
            </el-form-item>
        </el-col>
         <el-col :span="8">
           <el-form-item class="align-text:center">
               <el-button type="primary" size="medium" round icon="el-icon-search" :loading="downloadLoading" style="margin:0 0 20px 20px;"  @click="handleSearch()">
                查询
            </el-button>
            <el-button type="info" size="medium" round icon="el-icon-back" :loading="downloadLoading" style="margin:0 0 20px 20px;"  @click="handleBack()">
                返回
            </el-button>
         </el-form-item>
        </el-col>
    </el-form>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
    :row-click="handleCell">
    <el-table-column
      prop="deptName"
      label="网格区域"
      width="250">
      <template slot-scope="{row}">
       <el-link @click="handleSearchTo(row)" target="_blank" class="buttonText"  type="primary" :underline="false">{{row.deptName}}</el-link>
      </template>
    </el-table-column>

      <el-table-column label="人口信息采集">
        <el-table-column
          prop="rkcj"
          
          label="人口采集"
          width="100">
        </el-table-column>
        <el-table-column
          prop="rkbz"
          label="地图标注"
          width="100">
        </el-table-column>
      </el-table-column>

      <el-table-column label="人口类型采集">
        <el-table-column
          prop="household"
          label="户籍人口"
          width="100">
        </el-table-column>
        <el-table-column
          prop="floating"
          label="流动人口"
          width="100">
        </el-table-column>
        <el-table-column
          prop="overseas"
          label="境外人口"
          width="100">
        </el-table-column>
      </el-table-column>

      <el-table-column label="特殊人群">
        <el-table-column
          prop="release"
          label="刑满释放"
          width="100">
        </el-table-column>
        <el-table-column
          prop="correct"
          label="社区矫正"
          width="100">
        </el-table-column>
         <el-table-column
          prop="mental"
          label="精神病人"
          width="100">
        </el-table-column>
        <el-table-column
          prop="drug"
          label="吸毒人员"
          width="100">
        </el-table-column>
         <el-table-column
          prop="aids"
          label="艾滋病人"
          width="100">
        </el-table-column>
      </el-table-column>
    

      <el-table-column label="其他特殊人群">
        <el-table-column
          prop="petition"
          label="上访老户"
          width="100">
        </el-table-column>
        <el-table-column
          prop="terrorist"
          label="涉恐人员"
          width="100">
        </el-table-column>
         <el-table-column
          prop="stabilizing"
          label="涉稳人员"
          width="100">
        </el-table-column>
        <el-table-column
          prop="teachers"
          label="涉师人员"
          width="100">
        </el-table-column>
         <el-table-column
          prop="cult"
          label="邪教人员"
          width="100">
        </el-table-column>
        <el-table-column
          prop="veteran"
          label="涉军人员"
          width="100">
        </el-table-column>
      </el-table-column>
    <el-table-column
          prop="youth"
          label="重点青少年"
          width="100">
    </el-table-column>
  </el-table>
</div>
</template>
 
<script>
 import {getDataList,getBackDataList} from "@/api/xapply/statistics/demographicStatistics";
  export default {
    data() {
      return {
          gridId: "",//隐藏
          monthBegin: "",
          monthEnd: "",
          tableData: [],
          queryForm: {},
      }
    },
    methods: {
      tableRowClassName({rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSearch(){
        let form = null;
        form = this.queryForm;
        const params = form;
        getDataList(params).then(res=>{
            console.log(res.data);
            this.tableData = res.data.demographicStatisticsList;
            this.queryForm.userTopPermissionGridId = res.data.userTopPermissionGridId;
            this.queryForm.gridId =  res.data.deptId;
            this.queryForm.monthBegin = res.data.monthBegin;
            this.queryForm.monthEnd = res.data.monthEnd;
        })
    },
    handleBack(){
        if(this.queryForm.userTopPermissionGridId == this.queryForm.gridId){
            this.$message({
                    message: '已经是最顶层',
                    type: 'success'
            });
        }else{
          this.queryForm.gridId = "goback"+this.queryForm.gridId;
          let form = null;
          form = this.queryForm;
          const params = form;
          getBackDataList(params).then(res=>{
            this.tableData = res.data.demographicStatisticsList;
            this.queryForm.userTopPermissionGridId = res.data.userTopPermissionGridId;
            this.queryForm.gridId =  res.data.deptId;
            this.queryForm.monthBegin = res.data.monthBegin;
            this.queryForm.monthEnd = res.data.monthEnd;
        })
        }
    },
    handleSearchTo(row){
      console.log(row.deptId);
      this.queryForm.gridId = row.deptId;
      let form = null;
      form = this.queryForm;
      const params = form;
        getDataList(params).then(res=>{
            console.log(res.data);
            this.tableData = res.data.demographicStatisticsList;
            this.queryForm.userTopPermissionGridId = res.data.userTopPermissionGridId;
            this.queryForm.gridId =  res.data.deptId;
            this.queryForm.monthBegin = res.data.monthBegin;
            this.queryForm.monthEnd = res.data.monthEnd;
        })
    },
    },
    
  }
</script>
<style ang="scss" scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

 .app-container{
    background: #d8ecff; 
    padding:10px 5px 0; 
    border-top:1px solid #cee1f3;
    height: 100%
  }

.el-table thead {
    color: #171718;
    font-weight: 500;
}
/* .avue-view {
  padding: 0 10px !important;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
} */
</style>